import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';

const DateCarousel: React.FC<any> = ({
    timeDataSource,
    actionTimeId,
    getActionId,
}) => {
    const sliderRef = useRef<any>();
    const actionRef = useRef<any>();
   

    const handlePre = () => {
        sliderRef.current?.scrollTo({
            left: sliderRef.current?.scrollLeft - 240,
            behavior: 'smooth',
        });
    }

    const handleNext = () => {
        sliderRef.current?.scrollTo({
            left: sliderRef.current?.scrollLeft + 240,
            behavior: 'smooth',
        });
    }

    const handleClickItem = (info) => {
        getActionId(info)
    }

    useEffect(()=>{
        if (actionRef.current) {
            actionRef.current.scrollIntoView()
        }
    },[actionTimeId])
 
    return (
        <div className={styles.slider}>
            <div className={styles.sliderContent} ref={sliderRef}>
                {
                    timeDataSource.map((item,index)=>{
                        let text = new Date(item.currentDate).getFullYear()+'年'+(new Date(item.currentDate).getMonth()+1)+'月';
                        let actionStyle = actionTimeId == item.id ? styles.action : null;
                        return <div 
                                    key={index}
                                    className={styles.sliderItem+' '+actionStyle} 
                                    onClick={()=>handleClickItem(item)}
                                    ref={actionTimeId == item.id ? actionRef : null}
                                >
                            {text}
                        </div>
                    })
                }
            </div>
            {
                timeDataSource.length > 6 ? 
                <span className={styles.leftIcon} onClick={handlePre} ><LeftOutlined /></span>
                :null
            }
            {
                timeDataSource.length > 6 ? 
                <span className={styles.rightIcon} onClick={handleNext} ><RightOutlined /></span>
                :null
            }
        </div>
    )
}

export default DateCarousel;